<template>
  <el-dialog
    title="选择道馆"
    class="gl_dialog_TitleLine gl_dl_footer"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="cancelDialog"
    width="800px"
  >
    <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input v-model="qo.Filter" placeholder="请输入道馆名称" clearable type="text" size="mini" />
        </el-col>
        <el-col :span="18"><el-button type="primary" size="mini" @click="getPageList()">筛 选</el-button></el-col>
      </el-row>
      <el-table
        ref="organData"
        v-loading="loading"
        class="gl_table_noBorder gl_mt_15"
        :data="tableData"
        size="mini"
        :row-key="(row)=>{return row.id}"
        @selection-change="selectionOrgan"
      >
        <el-table-column type="selection" label-class-name="selection" :reserve-selection="true" />
        <el-table-column prop="displayName" label="道馆名称" />
        <el-table-column label="所在地区">
          <template slot-scope="{row}">
            {{ addressDataForCheck(row.provinceCode, row.cityCode, row.countyCode) }}
          </template>
        </el-table-column>
        <el-table-column label="联系人" prop="delegation.contactPerson" />
        <el-table-column label="联系方式" prop="delegation.phoneNumber" :width="120" />
      </el-table>
      <!-- 分页 -->
      <el-row class="gl_mt_15" style="text-align: right;">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="qo.MaxResultCount"
          :current-page="qo.Page"
          @size-change="changePageSize"
          @current-change="changePage"
        />
      </el-row>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="cancelDialog()">{{ $t('button.cancel') }}</el-button>
      <el-button size="mini" type="primary" :loading="btnLoading" @click="confirm()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapState, mapActions } from 'vuex';
// import { deepCopy } from '@/lib';
import {
  Api_GET_ClubDuanExamRequestDuanExamOrganizationUnitsQO // 查询级段位考试申报机构列表
} from '@/lib/form/hall/swaggerForm';
import {
  api_GET_ClubDuanExamRequestDuanExamOrganizationUnits // 查询级段位考试申报机构列表
} from '@/extend/api/hallswaggerApi/app';
export default {
  data() {
    return {
      btnLoading: false,
      qo: new Api_GET_ClubDuanExamRequestDuanExamOrganizationUnitsQO(),
      total: 0,
      dialogVisible: false,
      loading: false,
      tableData: [],
      organList: []
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      cache: state => state.dict.cache
    })
  },
  created() {
    this.getDictByType(['district']);
    // this.getPageList();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict', getDictByType: 'dict/getDictByType' }),
    // 获取人员名单
    getPageList(page) {
      this.qo.Page = page || 1;
      this.qo.SkipCount = (this.qo.Page - 1) * this.qo.MaxResultCount;
      this.loading = true;
      api_GET_ClubDuanExamRequestDuanExamOrganizationUnits(this.qo).then(res => {
        this.loading = false;
        this.tableData = res.items;
        this.total = res.totalCount;
      }, error => {
        this.loading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 选中的数据
    selectionOrgan(val) {
      this.organList = val;
    },
    confirm() {
      this.$parent.handlerOrganList(this.organList);
    },
    // 处理省市区
    addressDataForCheck (_provinceCode, _cityCode, _countyCode) {
      let _provinceData;
      let _cityData;
      let _countyData;
      if (_provinceCode && this.cache.district) {
        _provinceData = this.cache.district.find(item => item.code === _provinceCode);
      }
      if (_cityCode && _provinceData) {
        _cityData = _provinceData.children.find(item => item.code === _cityCode);
      }
      if (_countyCode && _cityData) {
        _countyData = _cityData.children.find(item => item.code === _countyCode);
      }
      _provinceData = _provinceData ? _provinceData.name : '';
      _cityData = _cityData ? _cityData.name : '';
      _countyData = _countyData ? _countyData.name : '';
      return `${_provinceData} ${_cityData} ${_countyData}`;
    },
    cancelDialog() {
      this.$refs.organData.clearSelection();
      this.dialogVisible = false;
      this.qo.Filter = '';
      this.organList = [];
      this.tableData = [];
    },
    // 分页
    changePage(page) {
      this.qo.Page = page;
      this.getPageList(page);
    },
    changePageSize(pagesize) {
      this.qo.MaxResultCount = pagesize;
      this.getPageList();
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
